// 导入：类型、接口、模块、组件、样式
import { Component } from "react";

import QfLoading from "../../../components/qfLoading";

import "../styled.scss";

interface Props {
  type: 1 | 2;
}
class Index extends Component<Props> {
  state = {
    num: 10,
    loadingState: false,

    films: [],
    total: 0,
    pageNum: 1,
    finished: false,
  };

  // componentWillReceiveProps(
  UNSAFE_componentWillReceiveProps(
    nextProps: Readonly<Props>,
    nextContext: any
  ): void {
    // console.log("旧的props：", this.props, "；新的props：", nextProps);
    this.getFilmApi(nextProps.type);
  }

  // 动词模块名Api = () => {}
  getFilmApi = async (type: number = this.props.type) => {
    // axios.get()
    // .then(res => {
    //   console.log(res)  // http相关信息  data
    //   console.log(res.data)  // 这才拿到接口数据
    // })
    // axios.get()
    // .then(res => res.data)
    // .then(res => {
    //   console.log(res) // 接口数据  上个then的返回值交给下一个then处理
    // })

    // fetch(请求地址)
    // .then(res  => res.json() )  // response对象  响应
    // .then(res => {   // 这才拿到接口数据
    // })

    // 多学一招：返回promise你就必须写then去获取数据   当然实战推荐改成await  => 自动获取到.then里面的数据

    // 语法1：axios.get(请求地址, 配置对象{method,params,headers...})
    // 返回1：切记返回的是promise 第一个res  http相关信息对象里面的data属性是接口数据  第二个res
    // 语法2：fetch(请求地址, 配置对象{...headers})
    // 返回2：返回的也是promise  第一个res  response对象 里面没有data必须通过json/text等方法拿到接口数据  第二个res就是接口数据
    //
    // 1 请求接口
    // const res = await fetch(
    const {
      data: { films, total },
    } = await fetch(
      // `https://m.maizuo.com/gateway?cityId=440300&pageNum=${this.state.pageNum}&pageSize=10&type=1&k=3557100`,
      // `https://m.maizuo.com/gateway?cityId=440300&pageNum=${this.state.pageNum}&pageSize=10&type=${this.props.type}&k=3557100`,
      `https://m.maizuo.com/gateway?cityId=440300&pageNum=${this.state.pageNum}&pageSize=10&type=${type}&k=3557100`,
      {
        headers: {
          "X-Host": "mall.film-ticket.film.list",
        },
      }
    ).then((res) => res.json());

    // 2 保存数据  -》 模型变了会自动同步到视图
    // console.log(9999, res.data/msg/status);
    // console.log(9999, res.data.films/total);
    // console.log(9999, films, total);
    this.setState({
      // films: this.state.pageNum <=1 ? films : [老数据, 新数据],
      films: this.state.pageNum <= 1 ? films : [...this.state.films, ...films],
      total,
      loadingState: false,
    });
  };

  componentDidMount(): void {
    // 1  获取默认数据   this组件实例  state/props/refs/setState/所有方法
    this.getFilmApi();

    // 2 上啦获取更多数据
    // 在componentDidMount中
    const docEl = document.documentElement;
    // 1、监控窗口滚动
    window.addEventListener("scroll", () => {
      // 2、事件处理函数中
      // - 2.1 获取滚动条到顶部的距离
      const scrollTop = docEl.scrollTop;
      // - 2.2 获取可见视口的高度
      const clientHeight = docEl.clientHeight;
      const scrollHeight = docEl.scrollHeight;
      // - 2.3 获取内容总高度
      // - 判断   当 2.1 + 2.2  >= 2.3  代表到底了    =>  异步请求获取数据追加到模型中
      if (scrollTop + clientHeight >= scrollHeight) {
        console.log("到底啦~");
        // 异步请求加载更多数据
        // 先开启loading
        // 然后请求接口 -》 拿到数据后再隐藏loading
        // if (films里面个数大于等于>总条数total)
        if (this.state.films.length >= this.state.total) {
          this.setState({
            finished: true,
          });
          return;
        }

        // 切记不能立马调用，而是要+1后调用
        this.setState(
          {
            loadingState: true,
            pageNum: this.state.pageNum + 1,
          },
          () => {
            this.getFilmApi();
          }
        );
        // 模拟异步请求
        // setTimeout(() => {
        //   this.setState({
        //     num: this.state.num + 10,
        //     loadingState: false,
        //   });
        // }, 2000);
        // ...
      }
    });
  }

  films = () => {
    // return new Array(this.state.num).fill(6).map((item, i) => {
    //   return (
    //     <div className="film" key={i}>
    //       <img
    //         src="https://static.maizuo.com/pc/v5/usr/movie/b16225b07bb1789563e35c42c3a32959.jpg?x-oss-process=image/quality,Q_70"
    //         alt=""
    //         className="poster"
    //       />

    //       <div className="info">
    //         <div className="title">
    //           野蛮人入侵{i + 1}
    //           <span>2D</span>
    //         </div>
    //         <div className="author">主演：杜乃强</div>
    //         <div className="time">上映时间：周二 8月4日</div>
    //       </div>

    //       <div className="buy">预购</div>
    //     </div>
    //   );
    // });

    return this.state.films.map((item: any, i: number) => {
      return (
        <div className="film" key={i}>
          <img src={item.poster} alt="" className="poster" />

          <div className="info">
            <div className="title">
              {item.name}
              {i}
              <span>{item.item.name}</span>
            </div>
            {/* 
              【名字,...,名字]
            */}
            <div className="author">
              主演：
              {item.actors
                ?.map((item: any, i: number) => {
                  return item.name;
                })
                .join(",")}
            </div>
            <div className="time">地区： {item.nation}</div>
          </div>

          <div className="buy">预购</div>
        </div>
      );
    });
  };

  render() {
    // [<h1>1</h1>, <h1>2</h1>, <h1>3</h1>]
    // const newarr = [1,2,3].map((item) => {
    //    return <h1>{item}</h1>
    // })
    // ----
    // const newarr = 后端数据数组里面是一个个对象.map(() => {
    //     return  <div className="film"></div>
    // })

    return (
      <>
        <h1>{this.props.type}</h1>

        {this.films()}

        {this.state.loadingState && (
          <div className="film">
            <QfLoading />
          </div>
        )}

        {this.state.finished && <div className="finished">- 到底啦 -</div>}
      </>
    );
  }
}
export default Index;
